<template>
  <div class="ppp">
    <div class="top">
      <van-nav-bar
        title="个人信息"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      />
    </div>
    <div class="mid-next">
      <div class="tou">
        <van-image
          v-for="item in userinfo.slice(0,1)" :key="item.id"
          round
          width="5rem"
          height="5rem"
          :src="`http://10.36.4.254:8080${item.avatar}`"
        />
      </div>
      <div class="nickname">
        <span v-for="item in userinfo" :key="item.id" style="color: black"
          >{{item.name}}</span
        >
      </div>
    </div>
    <div class="mytitle">
      <span>基本信息</span>
    </div>
    <van-divider />
    <div class="mybody">
      <div v-for="item in userinfo.slice(0,1)" :key="item.id">
        <tr>
          <td>电话</td>&nbsp;&nbsp;&nbsp;
          <td>{{item.phone}}</td>
        </tr>
        <van-divider 
        :style="{borderColor: 'rgb(224, 224, 224)', padding: '0 20px' }"
      >
      </van-divider>
        <tr>
          <td>性别</td>&nbsp;&nbsp;&nbsp;
          <td>{{item.sex}}</td>
        </tr>
        <van-divider 
        :style="{borderColor: 'rgb(224, 224, 224)', padding: '0 20px' }"
      >
      </van-divider>
        <tr>
          <td>生日</td>&nbsp;&nbsp;&nbsp;
          <td>{{item.birth}}</td>
        </tr>
      </div>
    </div>
    <van-divider />
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      userinfo: [],
    };
  },
  methods: {
    onClickRight() {
      this.$router.push("/Login");
    },
    loadInfo() {
      if (this.$store.state.loginCode) {
        this.axios
          .get(`/user/selectUserInfo?id=${this.$store.state.userId}`)
          .then((res) => {
            console.log(res);
            this.islode = 1;
            this.userinfo = res.data;
            console.log("用户信息" + this.userinfo);
          });
      }
    },
  },
  mounted() {
    this.loadInfo();
  },
};
</script>

<style scoped>
.mid-next {
  margin-top: 1rem;
  display: flex;
  margin-bottom: 5%;
  border-radius: 8px;
  background-color: rgb(239, 241, 243);
}
.tou {
  padding: 15px;
}

.nickname {
  width: 10rem;
  color: black;
  text-align: center;
}
.nickname span {
  line-height: 6.5rem;
  font-size: 1.2rem;
}
.top /deep/ .van-nav-bar .van-nav-bar__text {
  color: black;
  /* font-size: 1.5rem; */
}
.top /deep/ .van-nav-bar .van-nav-bar__title {
  color: black;
  font-size: 1.3rem;
}
.top /deep/ .van-nav-bar .van-icon {
  color: black;
}
.mybody {
  margin-left: 1rem
}
.mytitle{
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-left: 1rem;
  margin-bottom: 2rem;
}
</style>
